import React, { Component, Fragment } from "react";
// antd
import { DatePicker, Row, Card, Button } from "antd";
// http
import http from '../../../utils/request';


// bizcharts
import { Chart, LineAdvance, Tooltip, Line } from 'bizcharts';
import moment from 'moment';


const { RangePicker } = DatePicker;


class Dashboard1 extends Component {
    constructor(props){
        super(props);
        this.state = {
            begin_date: null,
            end_date: null,
            loading: false,
            cluster_data: [],
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'operation': 'alarm_sls',
            'begin_date': this.state.begin_date,
            'end_date': this.state.end_date,
        }

        const p0 = new Promise(resolve=>{
            http.get('/alarm/dashboard', {params: requestData}).then(response=>{
                resolve(response.data)
            }).catch()
        })

        Promise.all([p0]).then((res)=>{
            const cluster_data = res[0].data
            this.setState({
                cluster_data: cluster_data,
                loading: false,
            })
        })
    }

    onChange = (value, dateString) => {
        this.setState({
            begin_date: dateString[0] ? dateString[0] : null,
            end_date: dateString[1] ? dateString[1] : null,
        })
    }

    render(){
        const { loading, cluster_data } = this.state
        return (
            <Fragment>
                <Card>
                    <Row>
                        <space>
                            <RangePicker
                                ranges={{
                                    Today: [moment(), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                onChange={this.onChange} /> 
                        </space>
                        <span style={{ marginLeft: '15px'}}>
                            <Button type="primary" htmlType="submit" onClick={this.loadData} loading={loading}>搜索</Button>
                        </span>
                    </Row>       
                </Card>


                    <Chart 
                        placeholder={true}
                        padding={[10, 20, 50, 40]}
                        appendPadding={[80, 0, 50, 0]}
                        autoFit 
                        height={400} 
                        data={cluster_data} >

                        <Tooltip shared showCrosshairs/>
                        <Line shape="smooth" position="day*count" color="name" label="temperature"/>
                        <LineAdvance
                            shape="smooth"
                            point
                            area
                            position="day*count"
                            color="name"
                        />
                    
                    </Chart>

            </Fragment>
        )
    }
}
export default Dashboard1;